<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<div class="mui-content fs_xl" style="background: #f4f4f4;">
			<div class="one_info">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<volist name="exchange_info.goods_images" id="vo">
							<div class="swiper-slide"><img src="{$vo}" /></div>
						</volist>
					</div>
					<div class="pagination"></div>
				</div>
			</div>
			<div class="one_sp_tit fs_l">
				<p class="nohx fs_l">{$exchange_info.goods_name}</p>
				<p class="nohx fs_l"><span class="fs_xl no_red">{$exchange_info.exchange_integral}</span><em class="fs_s">银酒币</em><span style="float: right;" class="fs_xs">{$exchange_info.sales_sum}瓶已兑换</span></p>
			</div>
			<div class="one_m_info">
				<div class="one_top cls">
					<ul class="cls">
						<li class="active">图文详情</li>
						<li>商品参数</li>
					</ul>
				</div>
				<div class="one_info_m">
					<div class="one_item active">
						{$exchange_info.goods_content}
					</div>
					<div class="one_item canshu">
						<pre style="overflow: hidden;">
							{$exchange_info.goods_attr}
						</pre> 
					</div>
				</div>
			</div>
			<div class="nav fs_xl">
				<a href="{:U('/mobile/exchange/exchange_orderinfo',array('id'=>$exchange_info.goods_id))}" class="btn2 fs_xl">立即兑换</a>
			</div>
		</div>
		<script type="text/javascript">
			$(".device,.swiper-container").height($(".swiper-slide img").height());
			$(".swiper-container1").height($(".swiper-slide").height());
			$(window).resize(function() {
				$(".device,.swiper-container").height($(".swiper-slide img").height());
				$(".swiper-container1").height($(".swiper-slide").height());
			});
		</script>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				pagination: '.pagination',
				loop: true,
				autoplay: 5000,
				grabCursor: true,
				paginationClickable: true
			});
			$(function() {
				$(".one_top li").click(function() {
					$(".one_top li").removeClass("active").eq($(".one_top li").index(this)).addClass("active");
					$(".one_item").hide().eq($('.one_top li').index(this)).show();
				});
			});
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 5; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						table.appendChild(li);
					}
				}, 1500);
			}
		</script>
	</body>

</html>